<template>
	<div class="alarm-push">
		<el-card>
			<div class="toolbar">
				<el-button @click="addAlarm" type="primary" plain>模拟推送告警</el-button>
				<el-button @click="allRead" type="success" plain :disabled="alarms.length === 0">全部已读</el-button>
				<el-button @click="clearAll" type="danger" plain :disabled="alarms.length === 0">清空告警</el-button>
			</div>
			<el-table :data="alarms" border size="small" style="margin-bottom:8px;" :row-class-name="alarmRowClass">
				<el-table-column prop="time" label="推送时间" width="155" />
				<el-table-column prop="type" label="类型" width="110">
					<template #default="scope">
						<el-tag :type="tagType(scope.row.type)" size="small">{{ scope.row.type }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="level" label="级别" width="90">
					<template #default="scope">
						<el-tag :type="scope.row.level === '高' ? 'danger' : (scope.row.level === '中' ? 'warning' : 'info')"
							size="small">
							{{ scope.row.level }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="desc" label="告警内容" />
				<el-table-column prop="device" label="设备/产线" width="140" />
				<el-table-column prop="status" label="状态" width="100">
					<template #default="scope">
						<el-tag v-if="scope.row.read" size="small" type="success">已读</el-tag>
						<el-tag v-else size="small" type="info">未读</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="80">
					<template #default="scope">
						<el-button size="small" @click="markRead(scope.$index)"
							:disabled="scope.row.read">已读</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div v-if="alarms.length === 0" style="text-align:center;color:#bbb;padding:18px 0;">暂无告警记录</div>
		</el-card>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 告警类型、设备等模拟
const alarmTypes = ['设备故障', '产线停机', '参数异常', '批次超限', '环境异常']
const alarmLevels = ['高', '中', '低']
const devices = ['压片机D', '混合机B', '投料机A', '制粒机C', '包装机E', '固体制剂线', '注射剂线']

// 告警列表
const alarms = ref([])

// 模拟推送一条告警
function addAlarm() {
	const t = alarmTypes[Math.floor(Math.random() * alarmTypes.length)]
	const l = alarmLevels[Math.floor(Math.random() * alarmLevels.length)]
	const d = devices[Math.floor(Math.random() * devices.length)]
	const time = new Date().toLocaleString()
	const descMap = {
		'设备故障': '检测到设备异常停机',
		'产线停机': '产线自动停止，请检查',
		'参数异常': '温度/压力超限',
		'批次超限': '批次出入库异常',
		'环境异常': '洁净度或温湿度超标'
	}
	alarms.value.unshift({
		time,
		type: t,
		level: l,
		desc: descMap[t] + (l === '高' ? '（需立即处理）' : ''),
		device: d,
		status: '未读',
		read: false
	})
}

// 批量推送（模拟自动定时推送）
function autoPush() {
	addAlarm()
}
let timer = null
onMounted(() => {
	timer = setInterval(() => {
		// 概率自动推送一条新告警
		if (Math.random() > 0.65) addAlarm()
	}, 2200)
})
// 组件卸载清定时器
onUnmounted(() => { if (timer) clearInterval(timer) })

// 标记已读
function markRead(idx) {
	alarms.value[idx].read = true
}

// 全部已读
function allRead() {
	alarms.value.forEach(a => (a.read = true))
}

// 清空告警
function clearAll() {
	alarms.value = []
}

// 标签样式
function tagType(type) {
	if (type === '设备故障') return 'danger'
	if (type === '产线停机') return 'warning'
	if (type === '参数异常') return 'info'
	if (type === '批次超限') return 'primary'
	if (type === '环境异常') return 'success'
	return 'info'
}

// 高优先级高亮
function alarmRowClass({ row }) {
	if (row.level === '高' && !row.read) return 'alarm-high'
	if (row.level === '中' && !row.read) return 'alarm-mid'
	return ''
}
</script>

<style scoped>
.alarm-push {
	padding: 16px;
}

.toolbar {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.alarm-high {
	background: #fff4f2 !important;
	animation: twinkle 1s infinite alternate;
}

@keyframes twinkle {
	0% {
		background: #fff1f0;
	}

	100% {
		background: #ffeaea;
	}
}

.alarm-mid {
	background: #fff9ed !important;
}
</style>
  
